<template>
	<view style="height: 100vh;">
		<view style="display: flex; background-color: #e5e5e5; height: 100%; ">
			<view style="width: 120px; overflow-y: auto;">
				<view :class="item.id==version? 'version_item active':'version_item'"
					v-for="(item,index) in versionlist" :key="index" @click="handleVersionChange(index,item)">
					{{item.title}}</view>
			</view>
			<view style="flex: 1;background-color: #fff; padding-top: 10px;">
				<u-grid col="2">
					<u-grid-item>
						<view style="flex:1; text-align: center;">
							<image src="../../static/pep4a.jpg" style="width: 90px; height: 120px;"></image>
							<view><text>三年级上册</text></view>
						</view>
					</u-grid-item>
					<u-grid-item>
						<view style="flex:1; text-align: center;">
							<image src="../../static/pep4a.jpg" style="width: 90px; height: 120px;"></image>
							<view><text>三年级上册</text></view>
						</view>
					</u-grid-item>
					<u-grid-item>
						<view style="flex:1; text-align: center;">
							<image src="../../static/pep4a.jpg" style="width: 90px; height: 120px;"></image>
							<view><text>三年级上册</text></view>
						</view>
					</u-grid-item>
					<u-grid-item>
						<view style="flex:1; text-align: center;">
							<image src="../../static/pep4a.jpg" style="width: 90px; height: 120px;"></image>
							<view><text>三年级上册</text></view>
						</view>
					</u-grid-item>
					<u-grid-item>
						<view style="flex:1; text-align: center;">
							<image src="../../static/pep4a.jpg" style="width: 90px; height: 120px;"></image>
							<view><text>三年级上册</text></view>
						</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				versionlist: [{
						id: 1,
						title: "人教版(PEP)"
					},
					{
						id: 2,
						title: "冀教版"
					},
					{
						id: 3,
						title: "外研版"
					}
				],
				version: 1,
			}
		},
		methods: {
			handleVersionChange(index,item) {
				this.version = item.id;
			}
		}
	}
</script>

<style scoped>
	.version_item {
		height: 45px;
		background-color: #e5e5e5;
		line-height: 45px;
		text-align: center;
	}

	.active {
		height: 45px;
		background-color: #ffffff;
		line-height: 45px;
		text-align: center;
	}
</style>